import React, { Component } from 'react'

export default class ControlComponent extends Component {
  state = {
    username: '',
    password: ""
  }
  render() {
    return (
      <>
      <h1>受控组件,将值维护到状态内</h1>
      <form onSubmit={this.handleSubmit}>
        账号: <input type="text"  onChange={this.saveFormData('username') } />
        密码: <input type="password" onChange={this.saveFormData('password')} />
        <button>登录</button>
      </form>
    </>
    )
  }
  saveFormData = (type) => {
    return (event ) => {
      this.setState({[type]:event.target.value })
    }
  }
  handleSubmit = (event) => {
    event.preventDefault()
    alert(`账户:${this.state.username}, 密码: ${this.state.password}`)
  }
}
